<!-- 帖子分类编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate ? '修改帖子分类' : '添加帖子分类'"
    :visible="visible"
    width="50%"
    :destroy-on-close="true"
    :before-close="confirmClose"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="150px"
      style="margin: 10px 30px"
    >

      <el-form-item label="帖子分类名称:" prop="name">
        <el-input
          :maxlength="4"
          v-model="form.name"
          placeholder="请输入帖子分类名称"
          clearable
        />
      </el-form-item>

      <el-form-item label="帖子分类颜色:" prop="color">
        <el-input
          type="color"
          v-model="form.color"
          clearable
        />
      </el-form-item>

      <el-form-item label="帖子分类备注:" prop="desc">
        <el-input
          type="textarea"
          v-model="form.desc"
          placeholder="请输入帖子分类备注"
          clearable
        />
      </el-form-item>

      <el-form-item label="上架状态:" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="2">下架</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button @click="confirmClose()">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
      >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "articleTagEdit",
        props: {
            // 弹窗是否打开
            visible: Boolean,
            // 修改回显的数据
            data: Object,
        },

        data() {
            return {
                // 表单数据
                form: Object.assign({status: 1, color: '#8E703A'}, this.data),
                where: {},
                // 表单验证规则
                rules: {
                    name: [
                        {required: true, message: "请输入帖子分类名称", trigger: "blur"},
                    ],
                    status: [
                        {
                            required: true,
                            message: "请输入状态",
                            trigger: "blur",
                        },
                    ],
                },
                iosAttrTable: [],
                androidAttrTable: [],
                // 提交状态
                loading: false,
                // 是否是修改
                isUpdate: false,
            };
        },
        methods: {
            save() {
                if (this.form.name.includes("官方")) {
                    this.$message.error("帖子分类不可包含官方");
                    return false;
                }
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$http
                            .post("/BoxArticleTag/edit", this.form)
                            .then((res) => {
                                this.loading = false;
                                if (res.data.code === 0) {
                                    this.$message.success("创建成功");
                                    if (!this.isUpdate) {
                                        this.form = {};
                                    }
                                    this.updateVisible(false);
                                    this.$emit("done");
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            })
                            .catch((e) => {
                                this.loading = false;
                                this.$message.error(e.message);
                            });
                    } else {
                        return false;
                    }
                });
            },
            /* 更新visible */
            updateVisible(value) {
                this.$emit("update:visible", value);
            },

            confirmClose() {
                this.$confirm("确定要返回吗？", "温馨提示")
                    .then(() => {
                        this.updateVisible(false);
                        this.initForm();
                    })
                    .catch(() => {
                    });
            },
        },
    };
</script>

<style scoped>
</style>
